<template>
  <div class="device-manage-wrapper">
    <NewSelection :roleOption="user" @handleSearch="search" @getList="initList" :showLine="true"></NewSelection>
    <div class="manage-container">
      <div
        class="manage-box"
        v-for="(item, index) in list"
        :key="index"
        @click="viewDetail(item.deviceid)"
      >
        <NewCard :item="item"></NewCard>
      </div>
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.page"
        :page-sizes="[4, 12, 24]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      ></el-pagination> -->
    </div>
  </div>
</template>
<script>
import NewSelection from "@/components/newSelection";
import NewCard from "./manageCard";
import { mapGetters } from "vuex";
import { getDeviceList, getDeviceDetail } from "@/api";
export default {
  components: {
    NewSelection,
    NewCard,
  },
  computed: {
    ...mapGetters({
      user: "user",
    }),
  },
  data() {
    return {
      list: [],
      pagination: {
        page: 1,
        pageSize: 4,
        total: 0,
      },
    };
  },
  methods: {
    search(params1, params2) {
      console.log("搜索");
      this.getDeviceList(params2);
    },
    initList(p1, p2) {
      console.log('1111111', p1, p2);
      this.getDeviceList(p2);
    },
    async getDeviceList(routeId) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      // const params = {
      //   routeId: routeId,
      //   page: this.pagination.page,
      //   limit: this.pagination.pageSize,
      // };
   
      getDeviceList({
        routeId: routeId,
      })
        .then((res) => {
          loading.close();
          if (res.statusCode == 200) {
            this.list = res.data;
            this.list.forEach(item => {
              if(item.attachUrl && item.attachUrl.indexOf('http') < 0) {
                item.attachUrl = $globalUrl + item.attachUrl
              }
            })
          } else {
            this.$message.error(res.msg);
          }
        })
       
        .catch((err) => {
          loading.close();
          console.log(err);
        });
    },
    viewDetail(deviceId) {
      this.$router.push({
        path: "/DeviceDetail",
        query: {
          deviceId,
        },
      });
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pagination.page = val;
      this.getList();
    },
  },
};
</script>
<style lang="less" scoped>
.device-manage-wrapper {
  position: relative;
  padding: 30px 25px;
  overflow: hidden;
  background: rgba(27, 35, 45, 1);
  .manage-container {
    position: relative;
    // display: flex;
    // flex-wrap: wrap;
    margin-top: 30px;
    // justify-content: space-between;
    text-align: center;
    .manage-box {
      // flex: 0 0 22%;
      width: 23.4%;
      float: left;
      background: #fff;
      overflow: hidden;
      margin: 0 10px;
      border-radius: 5px;
      padding: 10px;
      margin-bottom: 20px;
    }
  }
}
</style>
